<template>
  <div id="flowCountLine">
    <!--上部搜索条件组件-->
    <!--<div class="table-conBtn">-->
    <!--</div>-->
    <h3 class="echarts-title">
      总直播时长
    </h3>
    <div id="flowLineEcharts"></div>
  </div>
</template>

<script>
import { searchListApi } from '@/api/anchor/anchor-list.js' // 接口
import { getInterval } from '@utils/pubFunction'
export default {
  name: 'echarts',
  msg: '分享回流-图表',
  components: {},
  watch: {
    activityAnalysisType(newV, oldV) {
      /*日/周/月*/
      /* console.log('日期变了')*/
      if (!this.clickSearch) {
        this.searchList()
      }
    }
  },
  data() {
    return {
      clickSearch: false, //是否点击查询按钮
      myCharts: null,
      formInline: {
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      activityAnalysisType: 'DAY',
      activityAnalysisTypeList: [],
      option: {
        legend: {
          left: 40
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            let total = 0
            params.forEach((item) => {
              total += item.value
            })
            let ary = params.map((item, index) => {
              if (item.value == undefined || item.value !== item.value) {
                item.value = 0
              }
              let percent = 0
              if (total > 0) {
                percent = ((item.value / total) * 100).toFixed(2)
              }
              // 小圆点显示
              let dotColor = `<span class="dotColor" style="background-color:${item.color}"></span>`
              return `${dotColor}${item.seriesName}：${Math.ceil(item.value/60)}分，占比${percent}%</br>`
            })
            let result = `${
              params[0].name
            }</br>总直播时长：${Math.ceil(total/60)}分</br>${ary.join('')}`
            return result
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: 50,
          containLabel: true
        },
        dataZoom: {
          zoomLock: false
        },
        xAxis: {
          type: 'category',
          axisTick: {
            length: 5
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} }
        ]
      }
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      this.myCharts = this.echarts.init(
        document.getElementById('flowLineEcharts')
      )
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.myCharts.resize()
      })
      this.myCharts.setOption(this.option)
    },
    /* 获取列表 */
    searchList(date, type) {
      let dateParams = date.split('/')
      if(dateParams[0] ==='null' || dateParams[1] ==='null' ){
         this.$message({
            message: '开始时间或结束时间不能为空',
            type: 'warning'
         })
         return false
      }
      this.myCharts.showLoading()
      let params = {
        endDate:dateParams[1],
        startDate:dateParams[0],
        type:'duration'
      }
      
      searchListApi(
        params,
        (response) => {
          //计算轴间隔
            if(response.data == null || response.series == null ){
              this.myCharts.hideLoading()
              this.$message({
              message: '暂无数据',
              type: 'warning'
            })
            return false
          }
          let data = response.data
          let dataLength = response.data.length
          let interval = 0
          if (dataLength > 30) {
            interval = getInterval(dataLength, 30)
          }
          //计算 dataZoom 结束位置
          let dataZoom = { show: false }
          if (dataLength > 10) {
            let endV = (interval + 1) * 10 - 1
            dataZoom = {
              show: true,
              moveOnMouseMove: false,
              type: 'slider',
              startValue: 0,
              endValue: endV
            }
          }
          //赋值
          let opt = {
            dataZoom: dataZoom,
            xAxis: {
              data: data,
              axisLabel: {
                interval: interval
              }
            },
            series: response.series
          }
          this.myCharts.setOption(opt)
          this.myCharts.hideLoading()
        },
        (response) => {
          this.myCharts.hideLoading()
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>

<style lang="less">
#flowCountLine {
  #flowLineEcharts {
    width: 100%;
    height: 380px;
  }
  .date-btn {
    position: relative;
    float: right;
    margin-right: 10px;
    z-index: 1;
  }
}
</style>
